<template>
	<view class="niceui-flex-column width-100p">
		<view class="bg">
			<image class="login-bg-img" src="../../static/login-top.png" mode="widthFix"></image>
			<view class="logo">
				<!--替换自己的logo图片/公司名/标语-->
				<view class="logo-border niceui-flex-column">
					<image class="logo-img" src="../../static/logo.png" mode="widthFix"></image>
					<text class="logo-name">{{title}}</text>
				</view>
			</view>
		</view>
		<view class="login-form">
			<view style="width: 100%;" class="form-item input_logo cuIcon-mobilefill">
				<input style="width: 100%;" class="input " @input="onInput" name="phoneno" :value="phoneno"
					type="number" maxlength="11" placeholder="输入手机号" placeholder-style="color:#c9c9c9;" />
			</view>
			<view style="width: 100%;" class="form-item input_logo cuIcon-qr_code">
				<input style="width: 90%;" class="input" name="vercode" maxlength="6" :value="vercode" @input="onInput1"
					placeholder="输入验证码" placeholder-style="color:#c9c9c9;" />
				<view style="padding-top: 15rpx;padding-left: 25rpx;">
					<button class='cu-btn line-yellow sm' v-show="timeshow" @click="getVerCode"
						style="width: 120rpx;">验证码</button>
					<button class='cu-btn line-yellow sm' disabled v-show="pause" style="width: 120rpx;">{{times}}
						s</button>
				</view>
			</view>
			<!-- <text class="forget-pass">忘记密码?</text> -->
			<view class="login-btns">
				<view class="btn-view" @click="login" :class="loginBntStatus?'login':'login-look'">
					<text :class="islogin?'btn-text cuIcon-loading2 cuIconfont-spin':''"></text>
					<text class="btn-text">登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		logincode,
		login
	} from '@/api/login.js';
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				title: "please shut up!",
				slogan: "",
				phoneno: null,
				timeshow: true,
				pause: false,
				times: 0,
				timer: null,
				loginStatus: false,
				islogin:false,
				keycode: 'love',
				vercode: null,
				loginBntStatus: false,
			}
		},
		onUnload() {
			clearInterval(this.timer);
		},
		methods: {
			login() {
				// if (!this.loginBntStatus) {
				// 	uni.showToast({
				// 		title: '请先发送验证码！',
				// 		icon: 'none',
				// 	});
				// 	return false;
				// }
				if (this.vercode == null || this.vercode.length < 4) {
					uni.showToast({
						title: '请输入正确的验证码！',
						icon: 'none',
					});
					return false;
				}
				this.islogin=true;
				var config = {
					deviceport: 2,
					lasting: false,
					linkup: true,
					logintype: 2,
					solecode: this.phoneno,
					vercodes: {
						keycode: this.keycode,
						valuecode: this.vercode
					}
				}
				// 获取token
				login(config).then(res => {
					this.islogin=false;
					let data = res.data.data.content;
					let message = res.data.data.resmsg;
					if (!res.data.data.status) {
						uni.showToast({
							title: message,
							icon: 'none',
						});
						return false;
					};

					this.userinfo = {
						token: data.token,
						accountid: data.result.accountid,
						userid: data.result.userid,
						username: data.result.username,
						roles: data.result.roles
					}
					store.commit('setUserinfo', this.userinfo);
					console.log(this.$store.state.userinfo);
					// 跳转登录页
					uni.navigateTo({
						url: '/pages/index/index'
					})
				}).catch(err => {
					this.islogin=false;	
					uni.showToast({
						title: err,
						icon: 'none',
					});
				})
			},
			onInput(e) {
				this.phoneno = e.detail.value
			},
			onInput1(e) {
				this.vercode = e.detail.value
			},
			getVerCode() {
				let that = this;
				console.log('longincode start!')
				if (!/^1[3456789]\d{9}$/.test(this.phoneno)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return false;
				}
				this.keycode = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
				// console.log('keycode:',this.keycode)
				var config = {
					phone: this.phoneno,
					code: this.keycode
				}
				that.loginBntStatus = true;
				that.times = 60;
				if (that.times == 60) {
					that.pause = true;
					that.timeshow = false;
					that.timer = setInterval(function() {
						that.times--;
						if (that.times == 0) {
							that.timeshow = true;
							that.pause = false;
							clearInterval(that.timer);
							that.timer = null;
						}
					}, 1000);
				
				}
				logincode(config).then(res => {
					console.log('longincode success！')

					uni.showToast({
						title: '验证码已发送',
						icon: 'none',
					});
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none',
					});
				})

			},
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/c/font_4384164_5f2pie5s8hs.ttf?t=1703254408937') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #fff;
	}

	.niceui-flex-column {
		flex-direction: column;
	}

	.niceui-flex-row {
		flex-direction: row !important;
	}

	.niceui-center {
		align-items: center;
	}

	.niceui-between {
		justify-content: space-between;
	}

	.width-100p {
		width: 100%;
	}
</style>
<style lang="scss" scoped>
	$head-color: #cd3b33;
	$white-color: #fff;
	$radius: 20rpx;
	$border-color: #efefef;
	$color-1: #007aff;
	$color-2: #4cd964;
	$color-3: #f0ad4e;
	$color-4: #dd524d;
	$list-item-height: 100rpx;
	$list-margin: 20rpx;
	$leftColor: #fdd447;
	$rightColor: #fa886a;

	.bg {
		background-image: linear-gradient(to bottom, $leftColor, $rightColor);
		height: 500rpx;
		width: 1400rpx;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -700rpx;
		border-bottom-left-radius: 100%;
		border-bottom-right-radius: 100%;
		flex-direction: column;
		align-items: center;
	}

	.login-bg-img {
		width: 100vw;
		margin-top: 22rpx;
	}

	.logo {
		position: absolute;
		z-index: 9;
		width: 100%;
		height: 450rpx;
		flex-direction: row;
		justify-content: center;
		align-items: flex-end;
	}

	.logo-border {
		align-items: center;
	}

	.logo-img {
		width: 160rpx;
		border-radius: 30rpx;
		margin-top: 130rpx;
	}

	.logo-name {
		margin: 30rpx 0 0rpx;
		font-size: 38rpx;
		color: #fff;
		font-weight: bold;
	}

	.logo-slogan {
		font-size: 34rpx;
		color: #fff;
		letter-spacing: 9rpx;
	}


	.login-form {
		margin-top: 500rpx;
		padding: 120rpx 100rpx 50rpx 100rpx;
		flex-direction: column;
		align-items: start;
		min-width: 550rpx;
	}

	.form-item {
		margin: 45rpx 0 25rpx;
	}

	.input {
		height: 65rpx;
		line-height: 65rpx;
		padding-left: 20rpx;
		border-bottom: solid 2px #f2f2f2;
		position: relative;
		// padding-left: 60rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: $leftColor;
	}

	.input_logo {
		height: 65rpx;
		line-height: 65rpx;
		position: relative;
		font-size: 42rpx;
		color: $leftColor;
	}

	.input_p {
		font-size: 32rpx;
		color: #c9c9c9;
	}

	.account::before {
		content: '\e61d';
		font-family: texticons;
		position: absolute;
		z-index: 9;
		left: 0rpx;
		bottom: 5rpx;
		font-size: 60rpx;
		color: #f9d57c;
	}

	.password::before {
		content: '\e623';
		font-family: texticons;
		position: absolute;
		z-index: 9;
		left: 0rpx;
		bottom: 1rpx;
		font-size: 60rpx;
		color: #f9d57c;
	}

	.forget-pass {
		color: #c9c9c9;
		font-size: 30rpx;
		display: block;
		width: 550rpx;
		text-align: right;
	}

	.login-btns {
		height: 100rpx;
		width: 100%;
		box-sizing: border-box;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.btn-view {
		width: 500rpx;
		margin: 200rpx auto 0;
		border-radius: 40rpx;
		height: 90rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.login {
		background-image: linear-gradient(to right, $leftColor, $rightColor);
	}

	.login-look {
		// background-color: #c9c9c9;
		background-image: linear-gradient(to right, $leftColor, $rightColor);
	}

	.btn-text {
		color: #fff;
		font-size: 36rpx;
	}
</style>